/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Text, View, Alert, Linking
} from 'react-native';
import VerificationCode from '../components/VerificationCode';
import OrderCard from '../components/OrderCard';
import ItemPanel from '../components/ItemPanel';

export default class App extends Component {
  constructor() {
    super();
    // 获取验证码
    this.state = { yanzText: '' };
    this.onStart = this.onStart.bind(this);

    // 订单卡片
    const url = 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=45e1c8e71ddfa9ece22e501752d1f754/342ac65c103853434cc02dda9f13b07eca80883a.jpg';
    const url1 = 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=725c6dda8682b90122adc533438ca97e/4e4a20a4462309f72df2ebef7e0e0cf3d6cad6aa.jpg';

    this.imgList = [url1, url, url1]; // {url, alt}
    this.orderId = 'SA17600147086'; // 订单id
    this.couponCount = 3; // 优惠券个数
    this.price = 200; // 支付金额
    this.userName = '刘德华'; // 用户名
    this.phoneCode = 88888888; // 用户电话
    this.href = this.href.bind(this);
    this.callMe = this.callMe.bind(this);
  }

  onStart() {
    if (Math.random() > 0.5) {
      this.setState({ yanzText: '验证通过, 稍后请查收' });
      return true;
    }
    this.setState({ yanzText: '手机号不正确, 修改后再试' });
    return false;
  }

  callMe(code) {
    Linking.openURL(`tel: ${code}`);
  }

  href() {
    console.clear();
    console.log('Hello');
    // 进入订单详情
    Alert.alert('Alert Title', 'Hello');
  }

  render() {
    const { yanzText } = this.state;
    return (
      <View>
        <VerificationCode onStart={this.onStart} time={5} style={{ color: 'blue' }} />
        <Text>{yanzText}</Text>
        <OrderCard
          href={this.href}
          callMe={() => this.callMe(this.phoneCode)}
          phoneCode={this.phoneCode}
          userName={this.userName}
          price={this.price}
          couponCount={this.couponCount}
          orderId={this.orderId}
          imgList={this.imgList}
        />
        <View style={{ padding: 10 }}>
          <ItemPanel title="登陆密码" arrowText="修改密码" />
          <ItemPanel title="清楚缓存" arrowText="5.67M" />
        </View>
      </View>
    );
  }
}
